<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
            * {
                margin: 0;
                padding: 0;
            }
            
            li {
                list-style-type: none;
            }
            
            .tab {
                width: 978px;
                margin: 100px auto;
            }
            
            .tab_list {
                height: 39px;
                border: 1px solid #ccc;
                background-color: #f1f1f1;
            }
            
            .tab_list li {
                float: left;
                height: 39px;
                line-height: 39px;
                padding: 0 20px;
                text-align: center;
                cursor: pointer;
            }
            
            /* 
                表示被选中的效果，后面需要将选中的类目加上该样式。
             */
            .tab_list .current {
                background-color: #c81623;
                color: #fff;
            }
            
            .item {
                display: none;
            }
        </style>
</head>
<body>
        <div class="tab">
                <div class="tab_list">
                    <ul>
                        <li class="current" index="1" >食品</li>
                        <li index="2" >电器</li>
                        <li index="3" >电脑</li>
                        <li index="4" >男装</li>
                        <li index="5" >图书</li>
                    </ul>
                </div>
                <div class="tab_con">
                    <div class="item" index="1" style="display: block"; ><!-- 默认显示 -->
                        食品.......
                    </div>
                    <div class="item" index="2" >
                        电器.......
                    </div>
                    <div class="item" index="3" >
                        电脑......
                    </div>
                    <div class="item" index="4" >
                        男装......
                    </div>
                    <div class="item" index="5" >
                        图书......
                    </div>
                </div>
        </div>

        <script>
            //获取所有li标签，绑定事件
            const lis = document.querySelectorAll("li")
            const items = document.querySelectorAll(".item")
            for(const li of lis){
                li.onmouseover = function(){
                    // console.log(this.innerText)
                    //去掉所有的类目的选中效果
                    for(const item of lis){
                        item.className = '';
                    }

                    //先去掉所有类目对应的商品显示
                    for(const item of items){
                        item.style.display = 'none';
                    }
                    
                    //当出发事件后，需要修改样式，变成被选中的效果
                    this.className = 'current'

                    //获取当前类目的index
                    const index = this.getAttribute("index")
                    items[index-1].style.display = 'block';
                }
            }
        </script>
</body>
</html>